<template>
    <div class="dashboard-container">
        <!-- 筛选查询 -->
        <el-form :inline="true">
            <el-form-item label="类型">
                <el-select v-model="params.type" placeholder="请选择" @change="getList">
                    <el-option
                        v-for="item in MENU_LIST"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
        </el-form>

        <!-- 数据列表 -->
        <el-table :data="list">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="数量" prop="count"></el-table-column>
            <el-table-column label="金额（元）" prop="price"></el-table-column>
            <el-table-column label="类型" prop="typeName"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button type="text" @click="handleAdd(row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="修改套餐" :visible.sync="dialogVisible" width="500px">
            <el-form label-width="100px" :model="temp"  :rules="rules" ref="ruleForm">
                <el-form-item label="次数" prop="count">
                    <el-input type="number" v-model="temp.count" placeholder="请输入次数"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input type="number" v-model="temp.price " placeholder="请输入价格"></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align: right;">
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
            </div>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import { forbiddenPhoneCreate, forbiddenPhoneGetList, forbiddenPhoneDelete } from '@/api/forbiddenPhone'
  import { MENU_LIST } from '@/utils/common'
  import { transfromData } from '@/utils/tools'
  import { menuGetlist, menuUpdate } from '@/api/menu'
  
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        MENU_LIST,
        list: [],
        params: {
            type: 0
        },
        dialogVisible: false,
        temp:{},
        rules: {
            count: [{ required: true, message: '请输入次数', trigger: 'blur' }],
            price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        }
      }
    },
    mounted(){
        this.getList();
    },
    methods: {
        //点击新增
        handleAdd(row){
            this.dialogVisible = true;
            this.temp = {
                dataId: row.id,
                count: row.count,
                price: row.price 
            }
        },
        //提交表单
        submitForm(formName){
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    await menuUpdate(this.temp)
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.dialogVisible = false;
                    this.getList();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async getList(){
            let data = await menuGetlist(this.params)
            this.list = data.data.map(item=>{
                item.typeName = transfromData(MENU_LIST, item.type)
                return item;
            })
        },
        //切换数量
        handleSizeChange(val){
            this.params.pageIndex = 0;
            this.params.pageCount = val;
            this.getList();
        },
        //切换页码
        handleCurrentChange(val){
            this.params.pageIndex = val-1;
            this.getList();
        }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
      
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  </style>
  